<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center overflow-hidden">
		<z-paging ref="paging" v-model="bottomListData" @query="queryList">
			<template #top>
				<view class="page-top-bg w-full z-0"></view>
				<view class="navBar w-full pl-30 pt-40 z-9999">
					<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
						功德榜
						<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
					</view>
				</view>

				<view class="w-690 p-30 m-auto mt-50 bg-white radius-36 z-9999">
					<view class="grid-box" v-if="topListData.length">
						<view class="top-list-item flex flex-col justify-end" v-for="(item,index) in topListData" :key="index">
							<image :src="item.avatar ? item.avatar : male" class="avatar"></image>
							<view class="bottom flex flex-col align-items-center">
								<text class="f-28 mt-20 text-bold text-center">{{ item.displayName }}</text>
								<text class="f-24 mt-12 text-bold" style="color: #D10800;">{{ item.amount.toLocaleString() }}元</text>
							</view>
						</view>
					</view>
					<view class="w-full h-full flex-center justify-center text-999" v-else>暂无数据~</view>
				</view>
				<view class="w-690 m-auto mb-30 mt-60 flex justif-between align-items-center z-9999">
					<text class="text-581403 f-32 text-bold">功德榜单</text>
					<view class="flex align-items-center text-581403 f-24">
						<text :class="[currentTab === 0 ? '': 'text-999']" @click="tabChange(0)">金额排序</text>
						<text class="ml-10 mr-10 text-999">|</text>
						<text :class="[currentTab === 1 ? '': 'text-999']" @click="tabChange(1)">时间排序</text>
					</view>
				</view>
				<image src="/src/static/icon-15.png" class="action-icon" @click="show = true"></image>
			</template>
			<view class="bottom-list-item w-690 mt-20 m-auto p-50 flex justif-between align-items-center"
				:class="[index===0 ? 'mt-40' :''] " v-for="(item,index) in bottomListData" :key="index">
				<view class="flex flex-col">
					<text class="text-592E22 f-32 text-bold">{{ item.displayName }}</text>
					<text class="f-24 mt-15"
						style="color: #93776F;">{{ dayjs(item.createdAt).format(('YYYY-MM-DD HH:mm:ss')) }}</text>
				</view>
				<text class="f-28 text-bold" style="color: #D10800;">{{ item.amount.toLocaleString() }}元</text>
			</view>
		</z-paging>

		<wd-popup v-model="show" closable safe-area-inset-bottom position="bottom"
			custom-style="border-radius:32rpx 32rpx 0 0;padding:30rpx;" @close="">
			<wd-form ref="form" size="large" :model="formData">
				<wd-cell-group border>
					<wd-input label="捐款人姓名" label-width="100px" prop="donorName" clearable v-model="formData.donorName"
						placeholder="捐款人姓名" :rules="[{ required: true, message: '捐款人姓名' }]" />
					<wd-input label="公示姓名" label-width="100px" prop="displayName" clearable v-model="formData.displayName"
						placeholder="公示姓名" :rules="[{ required: true, message: '公示姓名' }]" />
					<wd-input type="number" label="联系电话" label-width="100px" prop="phone" clearable v-model="formData.phone"
						placeholder="联系电话" :rules="[{ required: true, message: '联系电话' }]" />
					<wd-input type="number" label="捐款金额" label-width="100px" prop="amount" clearable v-model="formData.amount"
						placeholder="捐款金额" :rules="[{ required: true, message: '捐款金额' }]" />
					<wd-textarea label="描述" label-width="100px" prop="description" clearable auto-height :maxlength="100"
						v-model="formData.description" placeholder="描述" />
				</wd-cell-group>
				<view class="w-full mt-30">
					<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
				</view>
			</wd-form>
		</wd-popup>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import male from '@/static/male.png'
	import {
		useUserStore
	} from "@/store/user";
	import { onLoad } from '@dcloudio/uni-app';
	import { onUnload } from '@dcloudio/uni-app';

	const {
		api_get_meritsAmountPage,
		api_get_meritsTimePage,
		api_post_merits,
		api_post_payParams,
		api_post_createPay,
		api_get_payStatus
	} = useRequest();

	const {
		proxy
	} = getCurrentInstance();

	const show = ref(false)
	const form = ref(null)
	const formData = reactive({
		donorName: '',
		displayName: '',
		phone: '',
		amount: null,
		description: '',
		donorId: 0,
		donorType: '个人',
		meritType: '捐资',
		publicityLevel: '全名公示'
	})

	const handleSubmit = () => {
		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					show.value = false
					formData.tenantId = useUserStore().tenantId
					api_post_merits(formData).then(res => {
						uni.showModal({
							title: '温馨提示',
							showCancel: false,
							content: '您的捐款申请已提交，后续工作人员会电话联系您，请注意接听。感谢您的支持！',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						})
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}

	let timer = null
	const pay = async () => {
		const params = await api_post_payParams()
		api_post_createPay(params).then(orderRes => {
			WeixinJSBridge.invoke('getBrandWCPayRequest', {
				appId: params.appId,
				timeStamp: params.timeStamp,
				nonceStr: params.nonceStr,
				package: params.packageValue,
				signType: params.signType,
				paySign: params.paySign,
			}, (res) => {
				if (res.err_msg == "get_brand_wcpay_request:ok") {
					// 使用订单id,通过接口轮训查询支付状态
					timer = setInterval(() => {
						poolPayStatus(orderRes)
					}, 1000)
				}
			})
		})
	}

	const poolPayStatus = () => {
		api_get_payStatus().then(res => {
			if (res === true) {
				stopPool()
				uni.showToast({
					title: '支付成功'
				})
			}
		})
	}

	const stopPool = () => {
		clearInterval(timer)
		timer = null
	}

	const currentTab = ref(0)
	const tabChange = (index) => {
		params.value.type = index
		currentTab.value = index
		paging.value.reload()
	}

	const topListData = ref([])
	const queryTopList = () => {
		api_get_meritsAmountPage({
			page: 0,
			size: 6
		}).then(res => {
			topListData.value = res.content
		})
	}

	const paging = ref(null);
	const bottomListData = ref([]);
	const params = ref({})
	const queryList = (pageNo, pageSize) => {
		let d1 = Object.assign({
			page: pageNo - 1,
			size: pageSize
		}, {
			...params.value
		})
		let api = api_get_meritsAmountPage
		if (currentTab.value === 1) {
			api = api_get_meritsTimePage
		}
		api(d1).then(res => {
			paging.value.complete(res.content);
		}).catch(res => {
			paging.value.complete(false);
		});
	};


	onLoad(() => {
		queryTopList()
	})

	onUnload(() => {
		stopPool()
	})

	onHide(() => {
		stopPool()
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}

	.page-top-bg {
		position: fixed;
		top: 0;
		height: 812rpx;
		background-image: url('/src/static/bg-25.png');
		background-size: 100% 100%;
	}

	.bottom-list-item {
		// height: 176rpx;
		background-image: url('/src/static/bg-27.png');
		background-size: 100% 100%;
	}


	.grid-box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 3 列 */
		gap: 10px;

		.top-list-item {
			width: 198rpx;
			height: 224rpx;
			position: relative;

			.avatar {
				position: absolute;
				top: 0;
				left: calc(50% - 44rpx);
				width: 88rpx;
				height: 88rpx;
				border-radius: 24rpx;
			}

			.bottom {
				width: 198rpx;
				height: 180rpx;
				background-image: url('@/static/bg-26.png');
				background-size: 100% 100%;
				padding: 30rpx 0;
			}
		}
	}

	.action-icon {
		width: 96rpx;
		height: 106rpx;
		position: fixed;
		bottom: 300rpx;
		right: 10rpx;
		z-index: 999;
	}
</style>